LIFFアプリでは特定の場合のみautocomplete属性による自動補完が利用できる
2024.09.09こんばんは、リテールアプリ共創部のmorimorikochanです。
社内で技術検証を行ったので、広く共有しようと思います。
やりたいこと
iPhone/Android端末でLIFFアプリとして提供されている入力フォームに対し、autocomplete属性を用いた自動補完を行いたいです。
自動補完とは
iOSのSafariやAndroidのChromeでは、<input>要素や<select>要素などにタップしてフォーカスすると、キーボード上部に自動入力する候補がいくつか表示することができます。
これは、各要素のautocomplete属性に適切な値（メールアドレスの場合はemail、郵便番号の場合はpostal-code）を設定することで、端末側がそれを読み取り表示している機能です。
これ以降、本記事における自動補完はすべてこのautocomplete属性を用いた自動補完を指します。
先に結論
- LIFFアプリをLIFFブラウザで起動した場合、スマートフォンの種類により結果が異なる
- iOSの場合、自動補完が効かない
- Androidの場合、Androidの自動入力サービスによる自動補完が行われる
- 自動入力サービスにGoogleが設定されている場合、一部項目で意図しないようなフォーマットでの入力が行われる、また、補完される内容に再現性がない場合がある
- LIFFアプリを外部ブラウザで起動した場合、該当ブラウザにより自動補完が行われる
以下LIFFブラウザに絞って話を進めていきます。
iOSについて
safariでautocomplete属性にフォーカスした場合、以下左側画像のように名前や電話番号やキーボード上にサジェストされます。
対してLIFFブラウザで立ち上げた場合、キーボード上にサジェストされません。
| safari | LIFFブラウザ |
|---|---|
 |
 |
推察される原因
iOSアプリ上でWebサイトを表示するための仕組み（ウェブビュー）は以下の通り2種類存在しています。
- WKWebView: カスタマイズ性が高い
- SFSafariViewController: "Safariの主要な機能とプライバシー保護をアプリケーション内に効果的に統合"されている
今回焦点となっているautocomplete属性を用いた自動補完は、上記ドキュメントを読む限りSFSafariViewControllerにおいてのみ提供されている可能性が高いです。
また、LIFFブラウザはiOSではWKWebViewを利用して実現されています。
そのため自動補完が効かないのだと考えられます。
LIFFブラウザは、iOSではWKWebView (opens new window)、AndroidではAndroid WebView (opens new window)を利用しています。そのため、LIFFブラウザの仕様および動作についてもこれらの仕組みに準拠します。
https://developers.line.biz/ja/docs/liff/overview/#liff-browser
ちなみに、WKWebViewを利用した場合はブラウザ上で任意のJavascriptを実行することができるため、技術的には自動補完が可能であるかもしれませんが、すべてスクラッチで実装する必要があり実装コスト・運用コストが高いことが予想されます（DOMの解析や補完元データの取得・キーボード上への表示など、考えることが山ほどありそうですね😰）
Androidについて
Androidでは、例えばChromeアプリにはChromeアプリ独自の自動補完設定が存在していますが、これもsafariと同様に、Chromeアプリ以外のアプリでは自動補完が効きません。
ただし、Androidには自動入力サービスという設定が存在しておりその設定を有効にすることで自動補完を実現することが可能です。
自動入力サービスは補完に利用するアプリを選択もしくは無効にすることができます。
デフォルトでは以下のようにGoogleが選択可能になっていることが多いと思います。
パスワードとアカウント>自動入力サービス
これ以降、補完に利用するアプリとしてGoogleを選択して検証したので、その前提で進めます。
これですべての項目が完璧に自動補完されるわけではありません。
以下のような項目で検証してみましたが、住所(address-level2、street-address)については英語表記で補完されてしまいました。 また、Googleアカウントに生年月日や性別を設定していたとしてもこれらの項目は補完されませんでした。
ほとんどのサービスでは英語表記ではなく日本語での表記を求めているはずなので、英語の住所が入力された場合ユーザーが値を削除して手動で入力する手間が発生してしまいます。そうならないように住所(address-level2、street-address)についてはautocomplete属性を外したほうがユーザーにとって好ましいのではないかなと思います。
| 項目名 | autocomplete属性 | 自動入力できるか | 入力された値の精度・表記揺れ |
|---|---|---|---|
| メールアドレス | OK | 問題なし | |
| パスワード | new-password | OK | 問題なし |
| 姓 | family-name | OK | 問題なし |
| 名 | given-name | OK | 問題なし |
| 郵便番号 | postal-code | OK | ハイフン付きで補完される |
| 都道府県 | address-level1 | できない | - |
| 市区町村 | address-level2 | OK | 実用的ではない 英語表記で補完される Hyogo や Tokyo など |
| 住所 | street-address | OK | 実用的ではない 英語表記で補完される 1chome -22-14 Jinan, Shibuya City など |
| 電話番号 | tel-national | OK | 先頭の0が抜けて補完される8011112222 など（これは tel-nationalの仕様） |
| 生年月日(年) | bday-year | できない | - |
| 生年月日(月) | bday-month | できない | - |
| 生年月日(日) | bday-day | できない | - |
| 性別 | sex | できない | - |
また別の問題として、自動補完を試すたびに通常とは異なる以下の挙動をする場合がありました。
- 自動補完されない
- 間違った自動補完が行われる
- 姓の部分にフルネームが補完される
- 名の部分に電話番号が補完される
上記のことから、自動入力サービスが設定されているからといって必ずしも有効に利用できるとは限らないことがわかりました。
まとめ
冒頭で挙げた結論を再掲しておきます。
- LIFFアプリをLIFFブラウザで起動した場合、スマートフォンの種類により結果が異なる
- iOSの場合、自動補完が効かない
- Androidの場合、Androidの自動入力サービスによる自動補完が行われる
- 自動入力サービスにGoogleが設定されている場合、一部項目で意図しないようなフォーマットでの入力が行われる、また、補完される内容に再現性がない場合がある
- LIFFアプリを外部ブラウザで起動した場合、該当ブラウザにより自動補完が行われる
上記の通り、現状ではLIFFアプリでautocompleteを用いた自動補完は限定的なものとなっています。
普段私がLIFFアプリを利用する際はLIFFブラウザ上での起動がほとんどであるため、LIFFブラウザでの自動補完がより多くの項目、より多くの端末で進むとよりユーザーにとって便利なものになっていくのではないかなと感じました。
